<template>
  <div class="wrap">
    <div class="info">
      <div class="left">
        <div class="avatar"><img :src="info.avatar" alt="" /></div>
        <div class="text">
          <div class="name">{{ info.nickname }}</div>
          <div class="member">账号:{{ info.mobile }}</div>
        </div>
      </div>
      <router-link to="addVip">
        <div class="submit">
          <img src="@/assets/submit-icon.png" alt="" />
          发布会员
        </div>
        </router-link>
    </div>
    <div class="datas">
      <div class="col">
        已发布会员数：<span>{{ info.total }}</span>
      </div>
      <div class="col">
        待审核会员数：<span>{{ info.waiting_num }}</span>
      </div>
    </div>
    <div class="line">
      <div class="title">会员列表</div>
      <div class="search">
        筛选：
        <div class="flex">
          <el-select v-model="check_status" placeholder="审核状态">
          <el-option
            v-for="item in check_list"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
          <el-input
            class="search_nickname"
            v-model="keyword"
            placeholder="请输入昵称"
            clearable 
          ></el-input>
          <i
            class="el-icon-search pointer"
            @click="(currentPage = 1), getList()"
          ></i>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="col" v-for="item in list" :key="item.id">
        <item :item="item" />
      </div>
    </div>
    <div class="no_data" v-if="total == 0">
      <img src="@/assets/empty.png" />
     </div>
    <pagination
     v-if="total > 0"
      :total="total"
      :currentPage="currentPage"
      @handleCurrentChange="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  name: "IndexView",
  data() {
    return {
      keyword: "",
      check_status:"",
      check_list:[
        {id:'',name:'审核状态'},
        {id:'W',name:'等待审核'},
        {id:'Y',name:'审核通过'},
      ],
      info: {},
      total: 0,
      currentPage: 1,
      list: [],
    };
  },
  components: {
    item: () => import("@/components/item.vue"),
    pagination: () => import("@/components/pagination.vue"),
  },
  mounted() {
    this.getInfo();
    this.getList();
  },
  methods: {
    getInfo() {
      this.$post("user/userinfo").then((res) => {
        this.info = res.data;
      });
    },
    getList() {
      this.$post("user/member_list", {
        page: this.currentPage,
        rows: 20,
        keyword: this.keyword,
        check_status:this.check_status,
      }).then((res) => {
        this.list = res.data.data;
        this.total = res.data.total;
      });
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getList();
    },
  },
};
</script>

<style scoped lang="scss">
.info {
  margin-top: 20px;
  background: #fff;
  border: 1px solid #ebebeb;
  border-bottom: none;
  padding: 26px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left {
    display: flex;
    align-items: center;
  }
  .avatar {
    width: 156px;
    height: 156px;
    overflow: hidden;
    border-radius: 50%;
    margin-right: 20px;
  }
  .name {
    font-size: 20px;
    margin-bottom: 10px;
  }
  .member {
    font-size: 14px;
    color: #f43c8a;
  }
  .submit {
    display: flex;
    width: 117px;
    height: 40px;
    background: linear-gradient(-89deg, #ef3e91, #f4743c);
    border-radius: 4px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      display: block;
      width: 16px;
      margin-right: 6px;
    }
  }
}
.datas {
  display: flex;
  align-items: center;
  height: 80px;
  background: #f5f8fe;
  border: 1px solid #ebebeb;
  text-align: center;
  color: #666;
  position: relative;
  &::before {
    content: "";
    width: 1px;
    height: 100%;
    background: #ebebeb;
    position: absolute;
    left: 50%;
    top: 0;
  }
  span {
    color: #ef3e91;
  }
  .col {
    width: 50%;
  }
}
.line {
  height: 70px;
  background: #ffffff;
  border: 1px solid #ebebeb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  margin: 20px 0;
  position: relative;
  &::before {
    content: "";
    width: 4px;
    height: 18px;
    background: linear-gradient(-89deg, #ef3e91, #f4743c);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .title {
    font-size: 20px;
  }
  .search {
    display: flex;
    align-items: center;
    font-size: 14px;
    .flex {
      border-radius: 4px;
      border: 1px solid #c6c6c6;
      display: flex;
      align-items: center;
      padding-right: 14px;
    }
  }
  .el-icon-search {
    font-size: 18px;
  }
}
.list {
  display: flex;
  flex-wrap: wrap;
  margin: -10px;
  .col {
    width: 25%;
    padding: 10px;
  }
}
.no_data{
  text-align: center;
  padding: 100px 0;
}
:deep .el-input__inner {
  border: none;
  height: 34px;
  line-height: 34px;
}
@media screen and (max-width: 768px) {
  .info {
    padding: 14px;

    .avatar {
      width: 60px;
      height: 60px;
    }
    .content {
      width: calc(100% - 60px);
      padding-left: 12px;
    }
  }
  .info .name {
    font-size: 18px;
    margin-bottom: 4px;
  }
  .info .submit {
    width: 90px;
    height: 36px;
    font-size: 13px;
    img {
      width: 13px;
    }
  }

  .datas {
    height: 55px;
  }
  .line {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 90px;
    .title {
      font-size: 16px;
    }
  }
  .list {
    margin: -5px;
    .col {
      width: 50%;
      padding: 5px;
    }
  }
}
</style>
